<template>
	<view class="user-overview">
		<!-- 顶部用户信息 -->
		<view class="user-overview-header">
			<view class="user-overview-user-info">
				<view class="user-overview-user-details">
					<text class="user-overview-greeting">你好，{{ userInfo.userName }}同学！</text>
					<text class="user-overview-current-date">{{ currentDate }}</text>
				</view>
				<view class="user-overview-avatar">
					<image class="user-overview-avatar-image" :src="`${baseURL}${userInfo.avatar}`" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<!-- 今日概览 -->
		<view class="user-overview-stats">
			<view class="user-overview-stats-column">
				<view class="user-overview-stats-card ">
					<uni-icons type="list" size="30" color="#FF9800" />
					<view class="user-overview-stats-card-desc">
						<text class="user-overview-stats-number">{{ totalTasks }}</text>
						<text class="user-overview-stats-label">总任务</text>
					</view>

				</view>
				<view class="user-overview-stats-card">
					<view class="user-overview-charts-box">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
					</view>
				</view>
			</view>
			<view class="user-overview-stats-column">
				<view class="user-overview-stats-card">
					<uni-icons type="folder-add" size="30" color="#9C27B0" />
					<view class="user-overview-stats-card-desc">
						<text class="user-overview-stats-number">{{ studyTasks }}</text>
						<text class="user-overview-stats-label">学习任务</text>
					</view>
				</view>

				<view class="user-overview-stats-card ">
					<uni-icons type="home" size="30" color="#2196F3" />
					<view class="user-overview-stats-card-desc">
						<text class="user-overview-stats-number">{{ houseworkTasks }}</text>
						<text class="user-overview-stats-label">家务任务</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, watch } from 'vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts';
	import { userInfo } from '@/stores/user';
	import { baseURL } from '../utils/config';

	/**
	 * 组件属性接口定义
	 */	interface Props {
		totalTasks : number;
		studyTasks : number;
		houseworkTasks : number;
		completedTasks : number;
		completedRate : number;
	}

	/**
	 * 定义组件属性并设置默认值
	 */	const props = withDefaults(defineProps<Props>(), {
		totalTasks: 0,
		studyTasks: 0,
		houseworkTasks: 0,
		completedTasks: 0,
		completedRate: 0,
	});

	/**
	 * 当前日期显示文本
	 * @type {string} 格式化的日期字符串
	 */	const currentDate = ref('');

	/**
	 * 环形进度图数据
	 * @type {object} 包含图表系列数据的对象
	 */	const chartData = ref({});



	/**
	 * 环形进度图配置选项
	 * @type {object} 控制环形图的样式和显示内容
	 */	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: undefined,
		title: {
			name: `${Math.round(props.completedRate * 100)}%`,
			fontSize: 25,
			color: "#2fc25b"
		},
		subtitle: {
			name: "完成率",
			fontSize: 14,
			color: "#666666"
		},
		extra: {
			arcbar: {
				type: "default",
				width: 12,
				backgroundColor: "#E9E9E9",
				startAngle: 0.75,
				endAngle: 0.25,
				gap: 2,
				linearType: "custom"
			}
		}
	});

	/**
	 * 组件挂载时执行的初始化操作
	 */
	onMounted(() => {
		handleUpdateCurrentDate();
		handleUpdateChartData();
	});

	/**
	 * 监听任务数量变化，自动更新图表数据
	 * 当已完成任务数或总任务数发生变化时触发
	 */
	watch([() => props.completedRate], () => {
		handleUpdateChartData();
	});

	/**
	 * 更新当前日期显示
	 * 格式化当前日期为"今天是XXXX年XX月XX日，星期X"的形式
	 */	const handleUpdateCurrentDate = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		const day = now.getDate();
		const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
		const weekday = weekdays[now.getDay()];
		currentDate.value = `今天是${year}年${month}月${day}日，星期${weekday}`;
	};

	/**
	 * 更新环形进度图数据
	 * 根据当前的任务完成率更新图表显示
	 */	const handleUpdateChartData = () => {
		console.log("更新图表数据", props.completedRate);
		chartData.value = {
			series: [
				{
					name: "完成率",
					color: "#2fc25b",
					data: props.completedRate
				}
			]
		};
		// 同时更新环形进度图的标题显示
		opts.value.title.name = `${Math.round(props.completedRate * 100)}%`;
	};
</script>

<style lang="scss">
	.user-overview {
		padding: 0 20px 20px 20px;
		box-sizing: border-box;
	}

	/* 顶部用户信息 */
	.user-overview-header {
		// margin-bottom: 20px;
	}

	// 用户信息容器
	.user-overview-user-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
	}

	// 用户详情文本区域
	.user-overview-user-details {
		flex: 1;
	}

	// 问候语样式
	.user-overview-greeting {
		display: block;
		font-size: 20px;
		font-weight: 600;
		color: #2b2d42;
		margin-bottom: 5px;
	}

	// 当前日期样式
	.user-overview-current-date {
		display: block;
		font-size: 14px;
		color: #6b7280;
	}

	// 用户头像容器样式
	.user-overview-avatar {
		width: 60px;
		height: 60px;
		background: linear-gradient(135deg, #6C7CFF 0%, #57C5B6 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6px 16px rgba(108, 124, 255, 0.08);
		overflow: hidden;
		transition: all 0.3s ease;
	}

	// 头像点击效果
	.user-overview-avatar:active {
		transform: scale(1.05);
	}

	// 头像图片样式
	.user-overview-avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	/* 今日概览 */
	// 统计数据区域
	.user-overview-stats {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	// 统计列
	.user-overview-stats-column {
		display: flex;
		flex-direction: row;
		gap: 15px;
		flex: 1;
	}

	// 统计卡片基础样式
	.user-overview-stats-card {
		background: #ffffff;
		border-radius: 6px;
		text-align: center;
		box-shadow: 0 6px 16px rgba(108, 124, 255, 0.08);
		border: 1px solid #c8c7cc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		flex: 1; // 均分宽度
		height: 100px; // 统一高度
		min-width: 0; // 确保内容不会超出容器
	}

	// 确保统计数据卡片内容垂直居中
	.user-overview-stats-card {
		padding: 15px;
		box-sizing: border-box;
	}

	// 卡片点击效果
	.user-overview-stats-card:active {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(108, 124, 255, 0.12);
	}


	.user-overview-stats-card-desc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	// 图表容器样式
	.user-overview-charts-box {
		width: 100px;
		height: 100px;
	}

	// 统计数字样式
	.user-overview-stats-number {
		display: block;
		font-size: 28px;
		font-weight: bold;
		color: #007aff;
	}

	// 统计标签样式
	.user-overview-stats-label {
		display: block;
		font-size: 14px;
		color: #6b7280;
		font-weight: 500;
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 响应式设计 */
	@media (max-width: 375px) {
		.user-overview-stats-number {
			font-size: 24px;
		}
	}

	@media (min-width: 768px) {
		.user-overview-stats {
			gap: 20px;
		}
	}
</style>